<style lang="less">
</style>

<template>
  <div>
    <iview-table
            ref="table"
            :span1="16"
            :span2="8"
            :baseURL="queryModel.baseURL"
            :menuId="dataModel.menuId"
            :columns="dataModel.columns"
            :order="dataModel.order"
            :pageNumber="pageModel.pageNumber"
            :pageSize="pageModel.pageSize"
            :defaultFilters="queryModel.defaultFilters"
            v-on="{changeTotalSize:changeTotalSize,dblclick:dblclick,changeSelect:changeSelect}">
    </iview-table>
    <br>
    <iview-page
            :totalSize="pageModel.totalSize"
            :pageNumber="pageModel.pageNumber"
            :pageSize="pageModel.pageSize"
            :pageSizeOpts="pageModel.pageSizeOpts"
            v-on="{changePageNumber:changePageNumber,changePageSize:changePageSize}">
    </iview-page>
    <Modal v-model="showInbound" :closable='false' @on-cancel="cancelInbound" :mask-closable=true :width="600">
      <h3 slot="header" style="color:#2D8CF0">入库信息</h3>
      <Form ref="formItem" :model="inventoryDetails" :rules="ruleDetailsForm" :label-width="100">
        <Row>
          <Col span="20" offset="2">
            <FormItem label="入库商品：" prop="itemName">
              <Input size="large" v-model="inventoryDetails.itemName" readonly="true"></Input>
            </FormItem>
            <FormItem label="入库数量：" prop="quantity">
              <InputNumber size="large" style="width: 100%" :min="1" v-model="inventoryDetails.quantity"></InputNumber>
            </FormItem>
            <FormItem label="入库类型：" prop="typeId">
              <Select size="large" v-model="inventoryDetails.typeId" placeholder="请选择入库类型" style="width:100%" :label-in-value=true @on-change="changeType">
                <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="商品形态：" prop="normalFlag">
              <Select size="large" placeholder="请选择商品形态" v-model="inventoryDetails.normalFlag" style="width:100%">
                <Option value="0">正常品</Option>
                <Option value="1">异常品</Option>
              </Select>
            </FormItem>
            <FormItem label="过期时间：">
              <DatePicker size="large" type="date" placeholder="请选择过期时间" style="width: 100%" v-model="inventoryDetails.expiredDate"></DatePicker>
            </FormItem>
            <FormItem label="供应商：">
              <Select size="large" v-model="inventoryDetails.supplierId" style="width:100%" :label-in-value=true @on-change="changeSupplier">
                <Option v-for="item in supplierList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="维修商：">
              <Select size="large" v-model="inventoryDetails.repairerId" style="width:100%" :label-in-value=true @on-change="changeRepairer">
                <Option v-for="item in repairerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="入库备注">
              <Input v-model="inventoryDetails.remark" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入备注..."></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="info" @click="doInbound">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        data () {
            return {
                showInbound: false,
                typeList: [],
                supplierList: [],
                repairerList: [],
                selectRows: [],
                inventoryDetails: {
                    inventoryId: '',
                    itemId: '',
                    itemName: '',
                    typeId: '',
                    typeName: '',
                    supplierId: '',
                    supplierName: '',
                    repairerId: '',
                    repairerName: '',
                    normalFlag: '',
                    expiredDate: '',
                    quantity: '',
                    remark: ''
                },
                ruleDetailsForm: {
                    itemName: [
                        { required: true, message: '请选择入库商品', pattern: /.+/, trigger: 'change' }
                    ],
                    quantity: [
                        { required: true, message: '请填写入库数量', pattern: /.+/, trigger: 'change' }
                    ],
                    typeId: [
                        { required: true, message: '请选择入库类型', pattern: /.+/, trigger: 'change' }
                    ],
                    normalFlag: [
                        { required: true, message: '请选择商品形态', pattern: /.+/, trigger: 'change' }
                    ]
                },
                baseURL: '/user/inventory/details',
                queryModel: {
                    // 网关代理路径(必须)+资源路径(可选)
                    baseURL: '/user/inventory'
                },
                dataModel: {
                    menuId: 1000,
                    columns: [
                        {
                            title: '商品名称',
                            key: 'itemName',
                            width: 300
                        },{
                            title: '总库存',
                            key: 'totalInventory'
                        },{
                            title: '可用库存',
                            key: 'useInventory'
                        },{
                            title: '锁定库存',
                            key: 'lockInventory'
                        },
                        {
                            title: '操作',
                            width: 150,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.inbound(params.index, params.row)
                                            }
                                        }
                                    }, '入库')
                                ]);
                            }
                        }
                    ],
                    order: 'id desc'
                },
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100, 500]
                }
            };
        },
        methods: {
            dblclick (row, index) {
                this.$emit('clickInventory', row)
            },
            changeType (option) {
                this.inventoryDetails.typeId = option.value
                this.inventoryDetails.typeName = option.label
            },
            changeSupplier (option) {
                this.inventoryDetails.supplierId = option.value
                this.inventoryDetails.supplierName = option.label
            },
            changeRepairer (option) {
                this.inventoryDetails.repairerId = option.value
                this.inventoryDetails.repairerName = option.label
            },
            loadTypeList () {
                let url = '/user/inbound/type/findAll'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.typeList = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadSupplierList () {
                let url = '/user/supplier/findAll'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.supplierList = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadRepairerList () {
                let url = '/user/repairer/findAll'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.repairerList = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            inbound (index, row) {
                this.load()
                this.resetForm()
                this.$bus.init(this.inventoryDetails)
                this.inventoryDetails.inventoryId = row.id
                this.inventoryDetails.itemId = row.itemId
                this.inventoryDetails.itemName = row.itemName
                this.showInbound = true
            },
            doInbound () {
                this.$refs['formItem'].validate((valid) => {
                    if (valid) {
                        let url = this.baseURL + '/inbound'
                        this.$ajax.post(url, this.inventoryDetails).then((response) => {
                            let {code, msg} = response.data
                            if (code === 0) {
                                this.$bus.alert('success', '入库成功')
                                this.showInbound = false
                                this.refresh()
                                this.refreshDetails()
                            } else {
                                this.$bus.alert('error', msg)
                            }
                        })
                    }
                })
            },
            cancelInbound () {
                this.resetForm()
            },
            refreshDetails () {
                this.$emit('refreshDetails')
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            refresh () {
                this.$refs.table.refresh()
            },
            resetForm () {
                this.$refs.formItem.resetFields()
            },
            init () {
                this.load()
                this.refresh()
            },
            load () {
                // 加载入库类型
                this.loadTypeList()
                // 加载供应商
                this.loadSupplierList()
                // 加载维修商
                this.loadRepairerList()
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style>

</style>
